<template>
	<view class="mx-picovideo">
		<swiper :style="[swiperStyle()]" :duration="duration" :circular="circular" @change="currentChange" :current="current"
			:indicator-dots="false" :autoplay="autoplay">
			<block v-for="(item,index) in value" :key="index">
				<swiper-item class="icon_img" @tap.stop="clickup(index)">
					<template v-if="checkFile(item[name]) === 'image'">
						<image :src="item[name]" :mode="imgMode"></image>
					</template>
					<template v-if="checkFile(item[name]) === 'video'">
						<view class="video">
							<video :id="'video'+index" :show-loading="loading" :autoplay="vautoplay" :controls="controls" :loop="loop"
								:show-center-play-btn="showCenter" :show-play-btn="showplay" :muted="muted"
								:object-fit="fit" :enable-progress-gesture="gesture" :showFullscreenBtn="false"
								:src="item[name]">
							</video>
						</view>
					</template>
				</swiper-item>
			</block>
		</swiper>
	</view>
</template>

<script>
	import props from './props.js';
	/**
	 * mx-picovideo 轮播视频播放器 谷歌内核默认不支持首次自动播放
	 * @property {Array}			value					双向绑定数据
	 * @property {Number}			current					当前所在滑块的 index（默认 0 ）
	 * @property {Boolean}			autoplay				是否自动切换（默认 true ）
	 * @property {String | Number}	interval				自动切换时间间隔（ms）（默认 3000 ）
	 * @property {String | Number}	duration				切换过程所需时间（ms）（默认 300 ）
	 * @property {Boolean}			circular				播放到末尾后是否重新回到开头（默认 true ）
	 * @property {String}			name					双向数据中指定对象的目标属性名（默认 'url' ）
	 * @property {String | Number}	width					组件高度（默认 屏幕的宽度 ）
	 * @property {String}			imgMode					图片的裁剪模式（默认 'aspectFill' ）
	 * @property {String | Number}	height					组件高度（默认 100vh ）
	 * @property {String | Number}	radius					组件圆角，数值或带单位的字符串（默认 0 ）
	 * @property {Boolean}			vautoplay 				是否默认播放视频
	 * @property {Boolean}			controls				是否显示默认播放控件（播放/暂停按钮、播放进度、时间）
	 * @property {Boolean}			showCenter				是否显示视频中间的播放按钮
	 * @property {Boolean}			loading					是否显示loading控件
	 * @property {Boolean}			fit				当视频大小与 video 容器大小不一致时，视频的表现形式。contain：包含，fill：填充，cover：覆盖(默认：cover)
	 * @event {Function(index)}	click	点击轮播图时触发	index：点击了第几张图片，从0开始
	 * @event {Function(index)}	change	轮播图切换时触发	index：切换到了第几张图片，从0开始
	 */
	export default {
		name: 'wapper-video',
		mixins: [props],
		data() {
			return {
				currentIndex: 0
			}
		},
		watch: {
			currentIndex(newValue, oldValue) {
				setTimeout(() => {
					// 视频显示时播放
					if (this.equalVideo(newValue)) this.playChange(newValue);
					// 视频隐藏时停止播放
					if (this.equalVideo(oldValue)) this.pauseChange(oldValue);
				}, 500)
			}
		},
		created() {
			setTimeout(() => {this.init()}, 10)
		},
		methods: {
			// 初始化
			init() {
				if (this.current) {
					this.currentIndex = this.current;
				}
				this.$nextTick(() => {
					// 初始化播放视频
					if (this.equalVideo(this.current)) this.playChange(this.current);
				})
			},
			// 当前点击的下标
			clickup(index){
				this.$emit('click',index);
			},
			// swiper样式
			swiperStyle() {
				let style = {
					height: this.height,
					width: this.width,
					border: this.border
				};
				if (typeof this.height === 'number') {
					style.height = this.height + 'rpx';
				}
				if (typeof this.width === 'number') {
					style.width = this.width + 'rpx';
				}
				if (typeof this.border === 'number') {
					style.border = this.border + 'rpx';
				}
				return style
			},
			videoinitial(index) {
				return uni.createVideoContext(`video${index}`, this);
			},
			equalVideo(index) {
				if (this.checkFile(this.value[index][this.name]) === 'video') return true;
				return false
			},
			playChange(index) {
				let video = this.videoinitial(index);
				video.play();
			},
			pauseChange(index) {
				let video = this.videoinitial(index);
				video.pause();
			},
			currentChange(e) {
				this.currentIndex = e.detail.current;
				this.$emit('change', this.currentIndex);
			},
			autoplayFun(index) {
				return index === this.currentIndex;
			},
			checkFile(fileValue) {
				let index = fileValue.lastIndexOf(".");
				//截断"."之前的，得到后缀
				let fileValueSuffix = fileValue.substring(index);
				if (/(.*)\.(mp4|avi|wmv|MP4|AVI|WMV)$/.test(fileValueSuffix)) {
					//根据后缀，判断是否符合视频格式
					return 'video';
				}
				return 'image';
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import './common.scss';

	.video {
		@include unificationWH(100%);

		>video {
			@include unificationWH(100%);
		}
	}
</style>